<template lang="pug">
  ModuleWrapper(title="播种面积" flex="1")
    .chart-wrap(ref="chart")
</template>

<script>
export default {
  name: "ModulePopulation",
  data() {
    return {
      chart: null,
      timer: null,
      autoIndex: 0,
      data: [
        {
          label: '总人口',
          value: 0,
        },
        {
          label: '农业人口',
          value: 0,
        },
        {
          label: '新型职业农民',
          value: 0,
        },
        {
          label: '产业工人',
          value: 0,
        },
      ]
    }
  },
  methods: {
    renderChart() {
      this.chart = this.$echarts.init(this.$refs['chart']);
      this.chart.setOption({
        color: ['#1860d0', '#45c761', '#1bd8bb', '#8ad10c', ],
        legend: {
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            const [land, out] = params;
            const unit = land.name === '花卉园艺'?'亿支':'万吨'
            const outText = out.data === 0? '暂无':`${out.data}${unit}`;
            return `${land.name} <br>${land.marker}${land.seriesName}: ${land.data}万亩<br>${out.marker}${out.seriesName}: ${outText}`;
          }
        },
        grid: {
          left: '0',
          right: '3%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['粮食', '蔬菜', '花卉园艺', '水果',  '种植烤烟'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '播种面积',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              lineStyle: {
                color: ['rgba(255, 255, 255, .25)']
              }
            }
          },
          {
            type: 'value',
            name: '产量',
            // min: 0,
            // max: 25,
            // interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '播种面积',
            type: 'bar',
            data: [
              20.212, 6.54, 0.46, 10.7, 1.96
            ]
          },
          {
            name: '产量',
            type: 'bar',
            data: [
              6.3, 11.8, 0.8, 4.1, 0
            ]
          },
        ]
      });

      if(!!this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }

      this.timer = setInterval(() => {
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: this.autoIndex,
        });
        this.autoIndex = (this.autoIndex === 3) ? 0 : (this.autoIndex + 1);
      }, 3000);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart();
    });
  }
}
</script>

<style lang="scss" scoped>
.module{
  display: flex;
  flex-direction: column;
  .chart-wrap{
    flex: 1;
  }
}
</style>
